<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
  if (session.getAttribute("user") == null) {
    response.sendRedirect("../login.jsp");
    return;
  }
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人信息 - 智能记账系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <style>
    .sidebar {
      background-color: #f8f9fa;
      min-height: calc(100vh - 56px);
    }
    .sidebar .nav-link {
      color: #333;
      padding: 12px 20px;
      border-radius: 5px;
      margin-bottom: 5px;
    }
    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: #667eea;
      color: white;
    }
    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }
    .profile-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 30px;
      border-radius: 10px 10px 0 0;
    }
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid white;
      background-color: #f8f9fa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      color: #667eea;
      margin: -50px auto 20px;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="dashboard.jsp">
      <i class="fas fa-money-bill-wave me-2"></i>智能记账
    </a>
    <div class="navbar-nav ms-auto">
                <span class="navbar-text me-3">
                    欢迎，${user.fullName}
                </span>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
          <i class="fas fa-user-circle"></i>
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="profile.jsp"><i class="fas fa-user me-2"></i>个人信息</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="../logout"><i class="fas fa-sign-out-alt me-2"></i>退出登录</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <!-- 侧边栏 -->
    <div class="col-md-3 col-lg-2 sidebar p-0">
      <div class="d-flex flex-column flex-shrink-0 p-3">
        <ul class="nav nav-pills flex-column mb-auto">
          <li class="nav-item">
            <a href="dashboard.jsp" class="nav-link">
              <i class="fas fa-tachometer-alt me-2"></i>仪表板
            </a>
          </li>
          <li class="nav-item">
            <a href="income.jsp" class="nav-link">
              <i class="fas fa-money-bill-wave me-2"></i>收入管理
            </a>
          </li>
          <li class="nav-item">
            <a href="expense.jsp" class="nav-link">
              <i class="fas fa-shopping-cart me-2"></i>支出管理
            </a>
          </li>
          <li class="nav-item">
            <a href="budget.jsp" class="nav-link">
              <i class="fas fa-chart-pie me-2"></i>预算管理
            </a>
          </li>
          <li class="nav-item">
            <a href="profile.jsp" class="nav-link active">
              <i class="fas fa-user me-2"></i>个人信息
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 主内容区域 -->
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">个人信息</h1>
      </div>

      <div class="row">
        <div class="col-md-4">
          <!-- 个人信息卡片 -->
          <div class="card">
            <div class="profile-header text-center">
              <h4>${user.fullName}</h4>
              <p class="mb-0">${user.role == 'admin' ? '管理员' : '普通用户'}</p>
            </div>
            <div class="avatar">
              <i class="fas fa-user"></i>
            </div>
            <div class="card-body text-center">
              <h5 class="card-title">${user.fullName}</h5>
              <p class="card-text text-muted">${user.studentId}</p>
              <div class="d-grid gap-2">
                <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editProfileModal">
                  <i class="fas fa-edit me-1"></i>编辑资料
                </button>
                <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                  <i class="fas fa-key me-1"></i>修改密码
                </button>
              </div>
            </div>
          </div>

          <!-- 账户统计 -->
          <div class="card mt-4">
            <div class="card-header">
              <h6 class="card-title mb-0">账户统计</h6>
            </div>
            <div class="card-body">
              <div class="list-group list-group-flush">
                <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                  注册时间
                  <span class="text-muted">${user.createdAt}</span>
                </div>
                <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                  最后登录
                  <span class="text-muted">2025-11-05 10:30</span>
                </div>
                <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                  账户状态
                  <span class="badge bg-success">正常</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-8">
          <!-- 详细信息 -->
          <div class="card">
            <div class="card-header">
              <h5 class="card-title mb-0">详细信息</h5>
            </div>
            <div class="card-body">
              <div class="row mb-3">
                <div class="col-sm-3">
                  <strong>用户名</strong>
                </div>
                <div class="col-sm-9">
                  ${user.username}
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <strong>姓名</strong>
                </div>
                <div class="col-sm-9">
                  ${user.fullName}
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <strong>学号</strong>
                </div>
                <div class="col-sm-9">
                  ${user.studentId}
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <strong>邮箱</strong>
                </div>
                <div class="col-sm-9">
                  ${user.email}
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <strong>手机号</strong>
                </div>
                <div class="col-sm-9">
                  ${user.phone}
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <strong>用户角色</strong>
                </div>
                <div class="col-sm-9">
                                        <span class="badge ${user.role == 'admin' ? 'bg-danger' : 'bg-primary'}">
                                          ${user.role == 'admin' ? '管理员' : '普通用户'}
                                        </span>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-3">
                  <strong>注册时间</strong>
                </div>
                <div class="col-sm-9">
                  ${user.createdAt}
                </div>
              </div>
            </div>
          </div>

          <!-- 使用统计 -->
          <div class="card mt-4">
            <div class="card-header">
              <h5 class="card-title mb-0">使用统计</h5>
            </div>
            <div class="card-body">
              <div class="row text-center">
                <div class="col-md-3 mb-3">
                  <div class="border rounded p-3">
                    <h4 class="text-primary">128</h4>
                    <small class="text-muted">收入记录</small>
                  </div>
                </div>
                <div class="col-md-3 mb-3">
                  <div class="border rounded p-3">
                    <h4 class="text-success">356</h4>
                    <small class="text-muted">支出记录</small>
                  </div>
                </div>
                <div class="col-md-3 mb-3">
                  <div class="border rounded p-3">
                    <h4 class="text-info">24</h4>
                    <small class="text-muted">预算设置</small>
                  </div>
                </div>
                <div class="col-md-3 mb-3">
                  <div class="border rounded p-3">
                    <h4 class="text-warning">6</h4>
                    <small class="text-muted">使用月份</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

<!-- 编辑资料模态框 -->
<div class="modal fade" id="editProfileModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">编辑个人信息</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="editFullName" class="form-label">姓名</label>
            <input type="text" class="form-control" id="editFullName" value="${user.fullName}">
          </div>
          <div class="mb-3">
            <label for="editStudentId" class="form-label">学号</label>
            <input type="text" class="form-control" id="editStudentId" value="${user.studentId}">
          </div>
          <div class="mb-3">
            <label for="editEmail" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="editEmail" value="${user.email}">
          </div>
          <div class="mb-3">
            <label for="editPhone" class="form-label">手机号</label>
            <input type="tel" class="form-control" id="editPhone" value="${user.phone}">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

<!-- 修改密码模态框 -->
<div class="modal fade" id="changePasswordModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">修改密码</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="currentPassword" class="form-label">当前密码</label>
            <input type="password" class="form-control" id="currentPassword">
          </div>
          <div class="mb-3">
            <label for="newPassword" class="form-label">新密码</label>
            <input type="password" class="form-control" id="newPassword">
          </div>
          <div class="mb-3">
            <label for="confirmNewPassword" class="form-label">确认新密码</label>
            <input type="password" class="form-control" id="confirmNewPassword">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">修改密码</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>